<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>

<head>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <title>飞行航线</title>
    <script include='jquery' src='./static/libs/include-lib-local.js'></script>
    <script include='language,echarts' src='./static/libs/include-mapboxgl-local.js'></script>
    <link href='./static/demo/mapboxgl/example/style.css' rel='stylesheet' type='text/css' />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
<div id='map'>
    <div id='mouse-position'>
    </div>
</div>
<script>
    //一定要去mapbox注册一个key,这个key会失效的
    mapboxgl.accessToken =
        'pk.eyJ1IjoicGFybmRlZWRsaXQiLCJhIjoiY2o1MjBtYTRuMDhpaTMzbXhpdjd3YzhjdCJ9.sCoubaHF9-nhGTA-sgz0sA';
    var map = new mapboxgl.Map({
        container: 'map', // 绑定div
        style: 'mapbox://styles/mapbox/dark-v9', // 使用MapBox官方的样式
        center: [106.563777, 29.578285],
        zoom: 1
    });
    map.addControl(new MapboxLanguage(), 'top-right'); //中文支持
    //注册鼠标移动事件
    map.on('mousemove', function(e) {
        //经纬度坐标转web墨卡托
        const earthRad = 6378137.0;
        const x = e.lngLat.lng * Math.PI / 180 * earthRad;
        const a = e.lngLat.lat * Math.PI / 180;
        const y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
        document.getElementById('mouse-position').innerHTML = 'X轴：' + x.toFixed(2) + '，Y轴：' + y.toFixed(2);
    });
    updateView();

    function updateView() {
        $.get('../../static/data/echartsgl/lines/lines.geojson', function(data) {
            if (typeof data === 'string') {
                data = JSON.parse(data);
            }

            function getAirportCoord(idx) {
                return [data.airports[idx][3], data.airports[idx][4]];
            }

            var routes = data.routes.map(function(airline) {
                return [
                    getAirportCoord(airline[1]),
                    getAirportCoord(airline[2])
                ];
            });

            var option = {
                title: {
                    text: '世界航线',
                    left: 'center',
                    textStyle: {
                        color: '#eee'
                    }
                },

                tooltip: {
                    formatter: function(param) {
                        var route = data.routes[param.dataIndex];
                        return data.airports[route[1]][1] + ' > ' + data.airports[route[
                            2]][1];
                    }
                },
                mapboxgl: {
                    roam: true
                },
                series: [{
                    type: 'lines',
                    coordinateSystem: 'mapboxgl',
                    data: routes,
                    large: true,
                    largeThreshold: 100,
                    lineStyle: {
                        normal: {
                            opacity: 0.05,
                            width: 0.5,
                            curveness: 0.3
                        }
                    },
                    // 设置混合模式为叠加
                    blendMode: 'lighter'
                }]
            };

            layer = new mapboxgl.zondy.EchartsLayer(map, option).addTo(map);

        });

    }
</script>


</body>

</html>